<template>
    <div class="wrapper">
        <Form :label-width="80">
            <FormItem label="表单name" >
                <form-input v-model="form.name" @change="handlerChange"></form-input>
            </FormItem>
            <FormItem label="表单value" >
                <!-- <form-input v-model="form.value" @change="handlerChange"></form-input> -->
                <form-select v-model="form.value" @change="handlerChange" :options="validOptions" :multiple="subtype==='checkbox' ? true: false"></form-select>
            </FormItem>
            <FormItem label="placeholder" v-if="subtype==='input'||subtype==='select'">
                <form-input v-model="form.placeholder" @change="handlerChange"></form-input>
            </FormItem>
            <FormItem label="options" v-if="subtype==='select'||subtype==='radio'||subtype==='checkbox'">
                <form-options v-model="form.options" @change="handlerChange"></form-options>
            </FormItem>
            <FormItem label="字体大小">
                <form-slide :min="12" :max="200" @change="handlerChange" v-model="form.fontSize"></form-slide>
            </FormItem>
            <FormItem label="字体颜色">
                <ColorPicker @change="handlerChange" v-model="form.color"></ColorPicker>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import { Vue, Component, Prop, Model, Watch } from "vue-property-decorator"
import {
  State,
  Action,
  Getter
} from 'vuex-class'
import { FormOptions, FormInput, FormSlide, FormSelect } from '../forms';
@Component({
    components: {
        FormOptions,
        FormInput,
        FormSlide,
        FormSelect
    }
})
export default class extends Vue {
@Getter curElement
@Action actChangeElement
subtype = '';
form = {
    name: '',
    options: [],
    fontSize: 12,
    color: '#000',
    placeholder: '',
    value: ''
}
get validOptions() {
    return this.form.options.filter(o => o.label && o.value);
}
mounted () {
    if (this.curElement.type === 'form') {
        this.form = {...this.curElement.extra};
        this.subtype = this.curElement.subtype;
    }
    
}
handlerChange() {
    this.actChangeElement({
        extra: {
            ...this.form
        }
    })
}

}
</script>